<template>
  <div class="container">
      <h2 class="handle-title">系统管理 > 修改角色</h2>
      <el-form ref="form" :rules="rules" :model="form" class="demo-ruleForm" label-width="80px" style="width:430px">
        <el-form-item label="角色名字" prop="rolename">
            <el-input v-model="form.rolename" style="width:190px" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="角色状态">
            <el-select v-model="form.rolestate" placeholder="请选择角色状态">
            <el-option label="可用" value="1"></el-option>
            <el-option label="不可用" value="0"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="角色说明">
            <el-input type="textarea" v-model="form.roledesc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onUpdate('form')">修改</el-button>
            <el-button @click="goBack">取消</el-button>
        </el-form-item>
        </el-form>
  </div>
</template>

<script>
import { getId } from "../../api/public/api";
import { updateRole } from "../../api/public/api";
export default {
  name: '',
  data() { 
    return {
        form: {
          rolename: '',
          rolestate: '1',
          roledesc: ''
        },
        rules: {
          rolename: [
            { required: true, message: '请输入角色名称', trigger: 'blur' }
          ]
        }
    }
  },
  mounted() {
    let that = this;
    //获取修改的数据id
    let id = this.$route.query.id
    //根据ID查询角色的详细信息
    getId(id).then((res)=>{
        // console.log(res)
        //处理状态的数据类型
        res.data.data.rolestate = res.data.data.rolestate+"";
        that.form = res.data.data
    })
  },
  methods:{
    //修改角色
    onUpdate(formName) {
        let that = this;
        this.$refs[formName].validate((value)=>{
            // console.log(value)
            if(value){
                console.log(that.form)
                let formData = new FormData();
                formData.append("roledesc",that.form.roledesc);
                formData.append("rolename",that.form.rolename);
                formData.append("rolestate",that.form.rolestate);
                formData.append("roleid",that.form.roleid);
                updateRole(formData).then((res)=>{
                    //console.log(res)
                    if(res.data.code == 1){
                      that.$message({
                        message:"修改成功",
                        type:"success",
                      })
                      that.$router.push("/role")
                    }else{
                       this.$message({
                         message:"修改失败",
                         type:"info"
                       }); 
                    }
                })
            }
        })
    },
    //取消操作
    goBack() {
      this.$router.go(-1);
    },
  },
 }
</script>

<style scoped>

</style>